<template>
  <el-container direction="vertical">
    <Header />
    
    <!-- <HeaderSearch style="margin:  0 auto;" /> -->
    <el-main>
      <div v-if="products.length > 0">
        <h2 style="margin-left: 47%;">搜索结果</h2>
        <p>找到相关新闻为{{ products.length }}条</p>
        <!-- <h3 class="search-title">搜索结果</h3> -->
        <span v-for="product in products" :key="product.news_id">
          <router-link :to="'/detailPage/' + product.news_id" class="product-link">
            <el-row>
              <el-col :span="6">
                <img :src="product.news_img" style="height: 250px; width: 100%;">
              </el-col>
              <el-col :span="18">
                <el-card class="box-card" style="height: 250px;">
                  <h1>{{ product.news_title }}</h1>
                  <span>{{ product.digest }}</span><br>
                  <span style="color: gray;">发布者：{{ product.source }}</span><br>
                  <span style="color: gray;">发布时间：{{ product.post_date }}</span>
                </el-card></el-col>
            </el-row>
          </router-link>
        </span>
      </div>
      <div v-else>
        <p>未找到相关商品</p>
      </div>

    </el-main>
    <Footer />
  </el-container>
</template>

<script>
import HeaderSearch from "@/components/HeaderSearch.vue";
import Footer from "../components/Footer.vue";
// import HeaderSearch from "../components/HeaderSearch.vue";
import Header from '../components/Header.vue';

export default {
  components: {
    Footer,
    HeaderSearch,
    Header
  },
  data() {
    return {
      products: '',
      // searchResults: [],
    };
  },
  async mounted() {

    this.getKeyWord()
  },
  // watch: {
  //   $route(to, from) {
  //     if (to.path === '/search') {
  //       this.search(),

  //       this.getKeyWord()
  //     }
  //   }
  // },
  methods: {
    // search() {
    //   const keyword = this.$route.query.keyword;
    //   const newKeyword = (keyword || '').trim().toLowerCase();
    //   if (newKeyword !== '') {
    //     this.searchResults = this.products.filter(product => {
    //       const name = product.name || '';
    //       return name.toLowerCase().includes(newKeyword);
    //     });
    //   } else {
    //     this.searchResults = [];
    //     // console.log(this.$route.query.keyword);

    //   }
    // },
    // search() {
    //   if (this.$route.query.keyword !== this.keyword) {
    //     this.$router.push(`/search/${ this.keyword}`);

    //     // this.$router.push({ path: 'search', query: { keyword: this.keyword } });
    //     this.keyword = ''; // 清空搜索框
    //   }
    // },
    getKeyWord() {
      this.axios.post(`http://localhost:3000/news/searchNews`, { searchValue: this.$route.params.keyword })
        .then(res => {
          // 请求成功时，处理返回的数据  
          this.products = res.data.data;
          // this.itemImg = res.data.news_img
          // console.log(this.products);

          
        })
        .catch(error => {
          // 请求失败时，处理错误  
          console.error(error);

        });
    },
   
   
  }
};
</script>

<style scoped>
/* .el-main {
  height: 600px;
  background-color: #E9EEF3;
  line-height: 40px;
}

.search-results {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.search-title {
  width: 100%;
  text-align: center;
}

.product-link {
  text-align: center;
  width: 220px;
} */
</style>